﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>文本框</title>
	<script src="../lib/jquery.js"></script>
	<script src="../lib/jsm.min.js"></script>
</head>
<body>
	<script>
JW.TextBox = function(box){
	if(box.data().o != undefined) return box.data().o;
	var o = {}, TextBox = {
		Target : box, Input : box.children(".-input"),
		get Value(){
			return TextBox.Input.val();
		},
		set Value(val){
			if(val == TextBox.Input.val()) return;
			try{ val = val.toString(); }catch(ex){val = "";}; TextBox.Input.val(val);
			box.trigger("Changed", [TextBox.Input.val()]);
			if(box.attr("_oc")) eval(box.attr("_oc"));
		},
		get Enable(){
			var dis = box.children(".-disable");
			return dis.length == 0;
		},
		set Enable(val){
			if(va){
				box.children(".-Disable").remove();
				box.removeClass("TextBox-Disabled");
				TextBox.Input.removeAttr("readonly");
			} else {
				jsm.div({class:"-Disable"}).render(box);
				box.addClass("TextBox-Disabled");
				TextBox.Input.attr("readonly");
			};
		},
		Focus: function(){
			var box = TextBox.Input; box[0].select();
			box.unbind("mouseup", JW.TextBox.FocusMouseUp);
			box.mouseup(JW.TextBox.FocusMouseUp);
			o.ov = TextBox.Value; JW.State.__FCID = TextBox.Target.attr("id");
			TextBox.Target.addClass("-Focus"); TextBox.Input.one("blur",()=>{ TextBox.Target.removeClass("-Focus"); });
		}
	};

	TextBox.Input.on({
		blur:function(){
			if(o.ov != TextBox.Value){
				var oi = TextBox.Target.attr("_oi"); if(oi) eval(oi);
			};
		},
		keydown:function(e){
			if (e.keyCode == 13) TextBox.Input.blur();
		}
	});

	return box.data().o = TextBox;
};

JW.TextBox.Change = function(){
	var input = $(this), val = input.val(); input.val(val+"1");
	JW.TextBox(input.closest(".TextBox")).Value = val;
};
JW.TextBox.Focus = function(){
	JW.TextBox($(this).closest(".TextBox")).Focus();
};
JW.TextBox.FocusMouseUp = function(){
	var box = $(this);
	setTimeout(function(){box[0].select();},0); box.unbind("mouseup", JW.TextBox.FocusMouseUp);
};


jml.widget.TextBox = function(input, output){
	output.div({id:input.ID, style:"position:relative"}, input.attributes)

	//{
		output.input({value:input.attributes.Text})
	
		if(input.attributes.Encrypt){
			output({type:"password"})
		} else {
			output({type:"text"})
		}

		output()
	//}
	
	if(input.attributes.Enable == false){
		output.div({style:"position:absolute; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,.2)"})();
	}

	output()
	output(function(box){
		box = JW.TextBox($(box));

	});
}

jml.widget.InputText = function(input, output){

}

jml.widget.InputPassword = function(input, output){

}
	</script>

	<script type="text/jwml">
		
		.div
		()

		.div({style:"padding:10px"})
			.table
				.tr
					.td({style:"text-align:right"})`启用`()
					.td
						.TextBox({ID:"myText", Placeholder:"需要填写手机号"})()
					()
				()
				.tr
					.td({style:"text-align:right"})`禁用`()
					.td
						.TextBox({ID:"myText", Text:"禁用的文本框", Enable:false})()
					()
				()
				.tr
					.td({style:"text-align:right"})`错误提示`()
					.td
						.TextBox({ID:"myText", Text:"错误的文本框", Error:"需要填写验证码"})()
					()
				()
				.tr
					.td({style:"text-align:right"})`警告提示`()
					.td
						.TextBox({ID:"myText", Encrypt:true, Warn:"密码太简单"})()
					()
				()
			()
		()
	</script>

	
</body>
</html>
